<template>
    <div>
        <el-row>
            <el-col :span="16"><div class="left_box">
                <a id="name">
                    <br><br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp○______________<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp∥&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp∥&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp∥&nbsp&nbsp&nbsp&nbsp花友集聚地&nbsp&nbsp&nbsp&nbsp&nbsp|<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp∥&nbsp&nbsp&nbsp&nbsp&nbsp登录！！!&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp∥&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp∥&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp∥&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|<br>
                    &#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&#12288&nbsp&nbsp∥￣￣￣￣￣￣￣￣<br>
                    &#12288&#12288&nbsp&nbsp∥<br>
                    &#12288&#12288&nbsp&nbsp∥<br>
                    ∧＿∧<br>
                    (`･ω･∥<br>
                    |&nbsp&nbspつ&nbsp&nbsp0<br>
                    しーＪ<br>
                </a>
            </div></el-col>
            <el-col :span="8"><div class="right_box">
                <el-form>
                    <el-row>
                        <el-col :span="1" offset="4"><a style="font-size: 30px;">登录</a></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16" offset="4"><el-input v-model="email" placeholder="请输入邮箱"></el-input></el-col>
                    </el-row>
                    <el-row style="margin-top: 10px; margin-bottom: 10px;">
                        <el-col :span="6" offset="4"><el-input v-model="code" placeholder="请输入验证码"></el-input></el-col>
                        <el-col :span="9" offset="1"><el-button style="width:100%"  type="primary" @click="sendCode()" :disabled="seconds > 0">{{ seconds > 0 ? `${seconds}秒后重新获取` : '获取验证码' }}</el-button></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16" offset="4"><el-button style="width:100%" type="primary" @click="login()">登录</el-button></el-col>
                    </el-row>
                </el-form>
            </div></el-col>
        </el-row>
    </div>
</template>

<script>

import UserInfoApi from '../../api/mime/userinfo'

export default({
    data() {
        return {
            email: '', //邮箱
            code: '', //验证码
            seconds: 0,
        }
    },
    methods: {
        sendCode() {
            if (this.email == '') {
                this.$message.error("邮箱不能为空")
            } else {
            this.seconds = 60
                const timer = setInterval(()=>{
                    if (this.seconds > 0) {
                        this.seconds--
                    } else {
                        clearInterval(timer)
                    }
                }, 1000)
                UserInfoApi.sendMail(this.email)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.message)
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            }
            
        },
        login() {
            UserInfoApi.login(this.email, this.code)
            .then(res => {
                if (res.data.code == 200) {
                    let token = res.data.data
                    this.$message.success(res.data.message)
                    localStorage.setItem('authorization', token)
                    this.$router.push("/")

                } else {
                    this.$message.error(res.data.message)
                }               
            })
        }
    }
})
</script>


<style scoped>

.left_box {    
    background-color: #42b983;
    height: 832px;
}

.right_box {    
    height: 532px;
    margin-top: 300px;
}

#name {
    font-size: 30px;
    font-weight: bolder;
    color:#fff;
}

</style>